drow2DAxes(context);
var input = document.getElementsByTagName("input");
var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

/*
 *a1*x+b1*y=c1
 *a2*x+b2*y=c2
 *返回x,y
 */
function getXY(a1, b1, c1, a2, b2, c2) {
    let x = (c1 * b2 - b1 * c2) / (a1 * b2 - b1 * a2);
    let y = (a1 * c2 - c1 * a2) / (a1 * b2 - b1 * a2);
    return {
        x,
        y
    }
}

async function buOnclick() {
    let i1 = input[0].value;
    let j1 = input[1].value;
    let i2 = input[2].value;
    let j2 = input[3].value;
    let i3 = input[4].value;
    let j3 = input[5].value;

    let i11 = 0;
    let j11 = 0;
    let i22 = 0;
    let j22 = 0;
    let i33 = 0;
    let j33 = 0;

    try {
        i11 = eval(i1);
        j11 = eval(j1);
        i22 = eval(i2);
        j22 = eval(j2);
        i33 = eval(i3);
        j33 = eval(j3);
    } catch (error) {
        alert("输入格式不正确，请重新输入！");
    };

    let re = i11 * j22 - i22 * j11;
    if (re == 0) {
        alert("a1,a2不能线性相关！");
        return;
    }
    let xy = getXY(i11, i22, i33, j11, j22, j33);
    context.lineWidth = 3;
    context.font = "bold italic 15pt Times new roman";
    context.fillStyle = "black";
    //uft-8
    //alpha => u03B1
    //beta => u03B2
    /*
     *绘制a1,a2,b
     */
    await drowVector3(context, i11, j11, 0, 0, "red");
    context.fillText('\u03B11', i11 * c1, -j11 * c1);
    await drowVector3(context, i22, j22, 0, 0, "blue");
    context.fillText('\u03B11', i22 * c1, -j22 * c1);
    await drowVector3(context, i33, j33, 0, 0, "yellow");
    context.fillText('\u03B2', i33 * c1, -j33 * c1);

    /*
     *伸缩a1,a2
     */
    let x1 = i11 * xy["x"];
    let y1 = j11 * xy["x"];
    let x2 = i22 * xy["y"];
    let y2 = j22 * xy["y"];
    let h1x = (i11 - x1) / 10;
    let h1y = (j11 - y1) / 10;
    let h2x = (i22 - x2) / 10;
    let h2y = (j22 - y2) / 10;
    await Sleep(3000);
    for (let i = 1; i <= 10; i++) {
        clearCanvas(context, 2, true);
        drowVector(context, i11 - h1x * i, j11 - h1y * i, "red");
        drowVector(context, i22 - h2x * i, j22 - h2y * i, "blue");
        drowVector(context, i33, j33, "yellow");
        context.fillText('\u03B2', i33 * c1, -j33 * c1);
        await Sleep(100);
    }

    /*
     *a1移动到a2末端，表示出x*a1+y*a2=b
     */
    h1x = x1 / 10;
    h1y = y1 / 10;
    await Sleep(3000);
    for (let i = 1; i <= 10; i++) {
        clearCanvas(context, 2, true);
        drowVector(context, x1, y1, "red");
        drowLine(context, h1x*i, h1y*i, x2+h1x*i, y2+h1y*i, "blue");
        drowVector(context, i33, j33, "yellow");
        context.fillText('\u03B2', i33 * c1, -j33 * c1);
        await Sleep(100);
    }
    input[6].value = toFloat(xy["x"], 2);
    input[7].value = toFloat(xy["y"], 2);
}

show.onclick = buOnclick;

function inputHint() {
    for (let i = 0; i <= 7; i++) {
        input[i].onmouseover = hint;
    }
}
inputHint();